<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>每日一句</title>
  
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="app-mobile-web-app-capable" content="yes"> 
	<meta name="author" content="zhengoma" />
	<link href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css" rel="stylesheet">
	<link href="https://cdn.bootcss.com/element-ui/1.3.7/theme-default/index.css" rel="stylesheet">
	  <style>
    html, body {
        position: relative;
        height: 100%;
    }
    body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }
    .swiper-container {
        width: 100%;
        height: 100%;
		position:relative;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
	
	.txt{
		width:100%;
		height:100%;
		padding: 0;
		top: 0;
		left:0;
		position:absolute;
		z-index:2;
		height: 100%;
		background-position-x: 50%;
		background-repeat: no-repeat;
		background-size: auto 100%;	   
	}
	.txt1{
		color: #fff;
		width:90%;
		font-weight: 300;
		font-size: 30px;
		position: absolute;
		top: 40%;
		z-index: 20;
		font-family: 微软雅黑;	
		padding:0 5%;		
	}
	.overlay{
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 10;
		background: rgba(0, 0, 0, 0.5);
	}
	
	small{
		font-size:20px;
	}
	.el-date-editor{
		position: fixed;
		top: 10px;
		left: 10px;
		z-index: 10;
	}
	.el-icon-search{
		position: fixed;
		top: 10px;
		left: 10px;
		z-index: 10;
		width: 26px;
		height: 26px;
		line-height: 26px;
		text-align: center;
		background-color: rgba(193, 193, 193, 0.16);
		border-radius: 50%;
	}
	   


	@media screen and (min-width: 938px) {
		.txt {
		  background-size: 100% auto;
		  background-position-y: 50%;
		}
	  }
    </style>
	
	<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
	<script src="https://cdn.bootcss.com/element-ui/1.3.7/index.js"></script>
	<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.min.js"></script>
	<style>
		[v-cloak] {   display: none;  } 
    </style>

  </head>

    <!-- Swiper -->
    <div class="swiper-container" id="app" v-cloak>
	<i class="el-icon-search" v-if="datepickerVisible==false" @click="datepickerVisible=true"></i>
	<el-date-picker  v-if="datepickerVisible==true"
      v-model="datevalue"
      type="date"
      placeholder="选择日期"
	  @change="datepickerChange"	 
      :picker-options="pickerOptions0">
    </el-date-picker>
        <div class="swiper-wrapper">
		
            <div class="swiper-slide" v-for="a in arr">
				
				<div class="txt" :style="{backgroundImage: 'url(' + a.picture2 + ')'}" >
					<div class="overlay"></div>
					<p class="txt1">{{a.note}}<br><small>{{a.content}}</small></p>
					
				</div>
			</div>  
        </div> 
		
    </div>


	<script>
	function trimStr(str){return str.replace(/(^\s*)|(\s*$)/g,"");}
	function CurentTime(date,num)
    { 
	
		if(date){
			var timeStamp=Date.parse(new Date(date));			
			if(num!=null)timeStamp+=parseInt(num);			
		}else{
			var timeStamp = new Date(new Date().setHours(0, 0, 0, 0));	
		} 		
		var now = new Date(timeStamp);	
				
        var year = now.getFullYear();       //年
        var month = now.getMonth() + 1;     //月
		var day = now.getDate();          //日  
		
        var clock = year + "-";       
        if(month < 10)
            clock += "0";       
        clock += month + "-";       
        if(day < 10)
            clock += "0";           
        clock += day; 
		clock=clock.toString();			
        return(clock); 
    }
	</script>
	 <script>
	 window.onload=function(){
	
		swiper = new Swiper('.swiper-container', { 
			fade: {
				crossFade: false,	
			},	
			loop : true,
			onSlideNextStart: function(swiper){
				console.log('右滑动事件触发了;');				
				app.dateline=CurentTime(app.dateline,-86400000);
			},		
			onSlidePrevStart: function(swiper){
				console.log('左滑动事件触发了;');
				app.dateline=CurentTime(app.dateline,+86400000);
			}		
		});
	 }
    
    </script>
<script type="text/javascript">		
	var storage=window.localStorage;	
	//console.log(storage);
	//storage.clear();
	
	var app = new Vue({
		el: '#app',
	    data:{	
			today:'',
		    dateline: '',	
			dataid:[],			
			arr:[],
			datevalue:'',
			datepickerVisible:false,
            pickerOptions0: {
	          disabledDate(time) {
	            return time.getTime() > Date.now() - 8.64e7 || time.getTime() < 1359504000000; 
	          }
	        },
	    },
		methods:{
			datepickerChange:function(){				
				app.datepickerVisible=false;
				storage.setItem('datepicker',CurentTime(app.datevalue));
				window.location.reload();
			},		
			
			ajaxpost:function(){	
				if(app.dataid.indexOf(this.dateline)>-1){
					return false;		
				}				
				if(this.today<this.dateline){
					//console.log(Date.parse(new Date(this.today)));
					//console.log(Date.parse(new Date(this.dateline)));
					console.log("the day can't later than today !");
					return false;				
				}
				
				var dt=storage.getItem(this.dateline);					
				if(dt!=null){
					app.arr.push(JSON.parse(dt));
					app.dataid.push(this.dateline);
					console.log(this.dateline+"       local");										
					if(app.dataid.length==1){							
						this.dateline=CurentTime(this.dateline,-86400000);
					}
					if (typeof(swiper) != "undefined") 	swiper.reLoop();
					return false;
				}
				app.dataid.push(this.dateline);											
				$.ajax({
					type:"get",
					url:"http://open.iciba.com/dsapi/?date="+this.dateline,/*url写异域的请求地址*/
					dataType:"jsonp",					
					
					success:function(res){	
						console.log(res.dateline+"       ajax");												
						app.arr.push(res);	
						storage.setItem(res.dateline,JSON.stringify(res));						
						if (typeof(swiper) != "undefined") 	swiper.reLoop();						

					},
					 error:function(err){
						console.log(err.status);
					}					
				});	
				if(app.dataid.length==1){
					this.dateline=CurentTime(this.dateline,-86400000);
				}				
		    }			
		},
		watch:{
		
			dateline:function(){					
				this.ajaxpost();
			}
		},
		created: function () {
			this.today=CurentTime();
		},
		mounted:function(){			
			var datepicker=storage.getItem('datepicker');
			if(datepicker){	
				storage.removeItem('datepicker');
				this.datevalue=datepicker;
				this.dateline=datepicker;	
			}else{
				this.dateline=CurentTime();	
			}
			
		}
		
		
	});
</script>	
    
   
  </body>
</html>